<template>
  <div class="text-dark-50 w-full overflow-scroll px-6" style="background-color: var(--boxborder);">
    <div class="head h-1/10">
      <p class="text-3xl  font-mono  m-8">欢迎聆听</p>
    </div>
    <div class="relative">
      <div class="py-4 text-2xl font-bold flex justify-between">
        <p class=" font-mono">专辑推荐</p>
        <div class=" bg-gray-200 leading-8 h-8 w-20 flex justify-between rounded-xl">
          <i name="" class="iconfont icon-jiantou_xiangzuo pl-2 pre-btn" style="cursor:pointer"></i>
          <i name="" class="iconfont icon-jiantou_xiangyou pr-2 next-btn" style="cursor:pointer"></i>
        </div>
      </div>
      <Swiper :slides-per-view="6" :modules=[SwiperNavigation] :navigation="{
        nextEl: '.next-btn',
        prevEl: '.pre-btn'
      }" class=" rounded-md" style="background-color:var(--showbox);">
        <SwiperSlide v-for="(item, index) in AlbumBox" :key="index" class="pt-6 h-60 pl-2 flex-nowrap justify-around">
          <HomeAlbumCard :title="item.title" :_id="item._id" :auther="item.firstSinger" :cover="item.cover"
            @click="router.push(`/album/${item._id}`)" style="cursor:pointer" />
        </SwiperSlide>
      </Swiper>
    </div>
    <div class=" mt-8 font-bold">
      <ShowMusic :List="MusicBox" />
    </div>
    <div class="text-2xl font-bold mt-8 w-full">
      <ShowMusicList :Box="MusicListBox" />
    </div>
  </div>.
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { AlbumType, MusicListType, MusicType, ResultBase } from '~/types/interface';
const router = useRouter()
const musicData = await useFetch<ResultBase<MusicType>>('/api/music/gatrandom', { query: { size: 12 } }).then(res => res.data);
const albumData = await useFetch<ResultBase<AlbumType>>('/api/album/gatrandom', { query: { size: 10 } }).then(res => res.data)
const musicListData = await useFetch<ResultBase<MusicListType>>('/api/musiclist/gatrandom', { query: { size: 15 } }).then(res => res.data)

const MusicBox = ref<MusicType[]>(musicData.value?.data as MusicType[]);
const AlbumBox = ref<AlbumType[]>(albumData.value?.data as AlbumType[]);
const MusicListBox = ref<MusicListType[]>(musicListData.value?.data as MusicListType[])
</script>
<style scoped lang="less">
.yuandian>div {
  background-color: rgb(143, 143, 143);
  width: 4px;
  height: 4px;
  margin-right: 1rem;
  margin-top: 3px;
  border-radius: 50%;
}
</style>
